퍼플심_02_레드팀 시뮬레이션 구현

MVP의 목표

기획 단계에서 전체 그림은 그렸지만 개발의 첫 단추는 레드팀 시뮬레이션으로 끼우기로 했다.
공격자가 되어 전체 작전 프로세스를 경험해보는 것. 이게 MVP의 1차 목표다.

작전 시작 전에 무엇을 알아야 하는지, 그리고 어떤 흐름으로 진행되는지를 보여주는 데 집중했다.

화면 구성

React2Shell 시나리오에 대한 레드팀/블루팀 선택 인터페이스
레드팀 작전과 블루팀 작전은 크게 연동되지 않고 시나리오만 공유한다.
그냥 내가 하고 싶은 걸 하고 싶을 때 하는 구조다.

레드팀 워크벤치에 진입하면 가장 먼저 작전 브리핑(Briefing) 페이지가 뜬다.

• RT_ROE.pdf: 실제 작전 문서처럼 꾸민 목표와 범위. 이를 통해 레드팀 작전 시 필요한 항목들을 학습한다.
• Scenario.md: 게임적 재미를 위한 시나리오 배경 스토리.
• News와 메신저: 게임적 요소.
  인프라 구축은 아직 방향을 못 잡아서 가이드 형태로만 정리해둔 상태다.

본격적으로 작전 도구에서 레드팀을 플레이할 수 있다.

VS Code를 유사하게 클론한 인터페이스를 구현했다.
실제 레드팀 작전 흐름을 따라 6단계(Phase)로 진행 단계를 나눴다.
각 단계 화면은 VS Code 레이아웃을 차용해 익숙한 느낌을 주면서도 학습에 맞는 배치를 고민했다.

1. 상단 패널 (Guide & Instruction):
   • 화면 가장 위쪽에 배치해 현재 단계에서 무엇을 해야 하는지 명확히 알려준다.
   • 개념 설명(Concept)과 구체적인 지침(Instruction), 그리고 사용할 도구 가이드가 탭으로 제공된다.
2. 좌측 사이드바 (Explorer):
   • 프로젝트 파일 탐색기뿐 아니라 사용 가능한 공격 도구(Tools) 목록도 보여준다.
   • 도구를 클릭하면 상단 가이드 패널에 해당 도구의 사용법이 뜬다.
3. 메인 워크스페이스 (Terminal & Editor):
   • 화면 하단은 실제 작업 공간으로, 좌우로 분할된다.
   • Terminal(좌): 가이드된 명령어를 입력하고 실행 결과를 확인하는 곳.
   • Editor(우): 메모를 남기거나(Memo.md), 익스플로잇 코드를 작성/확인(Exploit.py)하는 곳.

상태 관리

기술적으로는 Zustand를 사용해 진행 상황을 관리한다.
사용자가 필요한 작업을 모두 수행하면 다음 페이즈로 넘어갈 수 있도록 했다.
이때 체크리스트로 사용자가 필요한 작업을 모두 수행했는지 확인한다.
부족한 부분이 있다면 다음 단계로 넘어가지 않고 미수행 작업 목록을 제시할 예정이다.
다음 페이즈로 넘어가면 가이드나 도구 등 내용도 바뀐다.

MVP 단계에서는 테스트를 위해 체크리스트는 아직 미구현이다. 그냥 다음 페이즈 버튼 누르면 넘어간다.